<#include "/common/taglibs.ftl" />

<!DOCTYPE html>

<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en">

<!-- begin::Head -->
<head>
    <meta charset="utf-8" />
    <title>Metronic | Login Page - 3</title>
    <meta name="description" content="Latest updates and statistic charts">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">

    <!--begin::Web font -->
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
    <script>
        WebFont.load({
            google: {
                "families": ["Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700"]
            },
            active: function() {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <!--end::Web font -->

    <!--begin::Base Styles -->
    <link href="${theme}/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />

    <!--RTL version:<link href="${theme}/assets/vendors/base/vendors.bundle.rtl.css" rel="stylesheet" type="text/css" />-->
    <link href="${theme}/assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />

    <!--RTL version:<link href="${theme}/assets/demo/default/base/style.bundle.rtl.css" rel="stylesheet" type="text/css" />-->

    <!--end::Base Styles -->
    <link rel="shortcut icon" href="${theme}/assets/demo/default/media/img/logo/favicon.ico" />
</head>

<!-- end::Head -->

<!-- begin::Body -->
<body class="m--skin- m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--fixed m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">

<!-- begin:: Page -->
<div class="m-grid m-grid--hor m-grid--root m-page">
    <div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor m-login m-login--sign m-login--2 m-login-2--skin-2" id="m_login" style="background-image: url(${theme}/assets/app/media/img/bg/bg-3.jpg);">
        <div class="m-grid__item m-grid__item--fluid	m-login__wrapper">
            <div class="m-login__container">
                <div class="m-login__logo">
                    <a href="#">
                    <#--<img src="${theme}/assets/app/media/img/logos/logo-1.png">-->
                        <img src="${socialUserInfo.headImg!}">
                    </a>
                </div>
                <div class="m-login__signup">
                    <div class="m-login__head">
                        <h3 class="m-login__title">${socialUserInfo.nickname!}</h3>
                        <div class="m-login__desc">第三方账号授权成功，请完善个人资料</div>
                    </div>
                    <form class="m-login__form m-form" action="" method="post">
                        <div class="form-group m-form__group">
                            <input class="form-control m-input" id="loginName" type="text" placeholder="Login Name" name="loginName">
                        </div>
                        <div class="form-group m-form__group">
                            <input class="form-control m-input" id="email" type="text" placeholder="Email" name="email" autocomplete="off">
                        </div>
                        <div class="form-group m-form__group">
                            <input class="form-control m-input" id="password" type="password" placeholder="Password" name="password">
                        </div>
                        <div class="form-group m-form__group">
                            <input class="form-control m-input m-login__form-input--last" type="password" placeholder="Confirm Password" name="confirmPassword">
                        </div>
                        <#--<div class="row form-group m-form__group m-login__form-sub">
                            <div class="col m--align-left">
                                <label class="m-checkbox m-checkbox--focus">
                                    <input type="checkbox" name="agree">I Agree the
                                    <a href="#" class="m-link m-link--focus">terms and conditions</a>.
                                    <span></span>
                                </label>
                                <span class="m-form__help"></span>
                            </div>
                        </div>-->
                        <div class="m-login__form-action">
                            <button id="m_login_signup_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air  m-login__btn">Sign Up</button>
                        <#--&nbsp;&nbsp;<button id="m_login_signup_cancel" class="btn btn-outline-focus m-btn m-btn--pill m-btn--custom  m-login__btn">Cancel</button>-->
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- end:: Page -->

<!--begin::Base Scripts -->
<script src="${theme}/assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
<script src="${theme}/assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>

<!--end::Base Scripts -->

<!--begin::Page Snippets -->
<#--<script src="${theme}/assets/snippets/custom/pages/user/login.js" type="text/javascript"></script>-->
<script>
    //== Class Definition
    var Login = function() {

        var handleSignUpFormSubmit = function() {
            $btn = $('#m_login_signup_submit');
            var $form = $btn.closest('form');
            $form.validate({
                rules: {
                    loginName: {
                        required: true,
                        remote: {
                            url: "${ctx}/social/register/validate",
                            type: "post",
                            data: {
                                field:"loginName",
                                fieldValue: function() {
                                    return $("#loginName").val();
                                }
                            }
                        }
                    },
                    email: {
                        required: true,
                        email: true,
                        remote: {
                            url: "${ctx}/social/register/validate",
                            type: "post",
                            data: {
                                field:"email",
                                fieldValue: function() {
                                    return $("#email").val();
                                }
                            }
                        }
                    },
                    password: {
                        required: true
                    },
                    confirmPassword: {
                        required: true,
                        equalTo: "#password"
                    }
                }
            });

            $btn.click(function(e) {
                e.preventDefault();

                if (!$form.valid()) {
                    return;
                }

                $btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);

                $form[0].submit();
            });
        }

        //== Public Functions
        return {
            // public functions
            init: function() {
                handleSignUpFormSubmit();
            }
        };
    }();

    //== Class Initialization
    jQuery(document).ready(function() {
        Login.init();
    });
</script>
<!--end::Page Snippets -->
</body>

<!-- end::Body -->
</html>